<template>
	<view class="content">
		<map :enable-satellite="isMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
			:scale="scale" :markers="markers" :polygons="polygons" @callouttap="onCallouttap"
			@regionchange="onRegionChange" >
			<!-- @tap="mapTap" -->
			<view class="btnmap" @click="isMap=!isMap">{{isMap?'腾讯地图':'卫星地图'}}</view>
			<!-- 覆盖在原生组件的文本视图 -->
			<!-- 遮罩层 -->
			<view v-if="popupShow" @click="popupShow=false" class="popup">
			</view>
			<view v-if="popupShow" class="deltail">
				弹层内容
			</view>
			<view class="btnmap way" @click="wayall">路径生成</view>
			<view class="btnmap close" @click="closeWayall">关闭路径</view>
			<view class="center">

			</view>
			<view class="addbutton" @click="mapTap">
				添加点
			</view>
		</map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '30.482814',
				longitude: '114.41917',
				isMap: false,
				scale: "16",
				markers: [{
					id: 0,
					latitude: 30.482814,
					longitude: 114.41917,
					width: 25,
					height: 35,
					callout: { // 气泡
						content: "标题",
						// bgColor: "rgba(255,255,255,0.51)",
						color: "#F56C6C",
						fontSize: 12,
						padding: 5,
						display: "ALWAYS",
						borderColor: "#F56C6C",
					},
				}],
				popupShow: false,
				polygons: [{ // 路线
					strokeWidth: 1,
					strokeColor: '#67c23a',
					fillColor: '#1791fc66',
					dottedLine: false,
					arrowLine: false,
					level: "abovelabels",
					// 必须要有三个默认属性，并且值不能完全一致，不然报错
					points: [{
						latitude: 30.627291,
						longitude: 114.343762
					}, {
						latitude: 30.627292,
						longitude: 114.343763,
					}, {
						latitude: 30.627291,
						longitude: 114.343762
					}]
				}],
				add: false,
				newlatitude: '',
				newlongitude: '',
				option: [],
				id: 0
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			// latitude: '30.482814',
			// longitude: '114.41917',
			onRegionChange(e) {
				if (e.type === 'end' || e.causedBy === 'drag') { // 判断是拖动结束还是缩放结束
					// this.longitude = e.center.longitude; // 获取新的经度
					// this.latitude = e.center.latitude; // 获取新的纬度
					this.add = true
					console.log('新中心点坐标:', e.target.centerLocation.latitude, e.target.centerLocation.longitude, );
					this.newlatitude = e.target.centerLocation.latitude
					this.newlongitude = e.target.centerLocation.longitude
				}
			},
			mapTap({
				detail: {
					latitude,
					longitude
				}
			}) {
				if (this.add) {


					console.log(latitude, longitude, '点击点')
					// this.popupShow = true
					this.option = {
						id: ++this.id,
						latitude: this.newlatitude,
						longitude: this.newlongitude,
						width: 25,
						height: 35,
						callout: {
							content: `点${this.id}`,
							color: "#F56C6C",
							fontSize: 12,
							padding: 5,
							display: "ALWAYS",
							borderColor: "#F56C6C",
						}
					}
					console.log(this.option, '点击点')
					let arr = []
					this.markers.push(this.option)
					this.markers.forEach(item => {
						arr.push({
							latitude: item.latitude,
							longitude: item.longitude
						})
					})
					this.add = false
					this.option = arr;
				} else {
					uni.showToast({
						title: "清先移动地图",
						duration: 2000
					})
				}
				// console.log(this.polygons, '地图画线');
			},
			wayall() {
				// 点线面，如果不是面就不让他生成
				if (this.option.length > 2) {
					this.polygons[0].points = [];
					this.polygons[0].points.push(...this.option)
					console.log(this.polygons, '得到的数值');
				} else {
					uni.showToast({
						title: "起码选择三个点",
						duration: 2000
					})
				}
			},
			change() {
				this.$refs.popup.close()
			},
			closeWayall() {
				this.polygons[0].points = [{
					latitude: 30.627291,
					longitude: 114.343762
				}, {
					latitude: 30.627292,
					longitude: 114.343763,
				}, {
					latitude: 30.627291,
					longitude: 114.343762
				}]
			},
			onCallouttap(event) {
				console.log(event.detail.markerId, '获取到点的id之后可以用点id去请求接口');
				this.popupShow = true
			}
		},

	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.2;
		overflow: hidden;
		z-index: 1000;
		color: #fff;
	}

	.deltail {
		z-index: 10001;
		height: 300px;
		position: fixed;
		bottom: 0px;
		width: 100%;
		background-color: #fff;
	}

	.btnmap {
		position: fixed;
		top: 80px;
		right: 20px;
		width: 110px;
		height: 30px;
		color: #92bbea;
		text-align: center;
		line-height: 30px;
		border: 1px solid #92bbea;
		background-color: #fff;
	}

	.way {
		right: 140px;
	}

	.close {
		right: 260px;
	}

	.center {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: black;
	}

	.addbutton {
		position: fixed;
		bottom: 80px;
		right: 20px;
		width: 110px;
		height: 30px;
		color: #92bbea;
		text-align: center;
		line-height: 30px;
		border: 1px solid #92bbea;
		background-color: #fff;
	}
</style>